<template>
	<div class="abs-page index-page">
		<Head navTitle="首页" isIndex/>
		<div class="page-container ">
			<!-- pc -->
			<div class="pc-show pc-index" v-if="windowWidth >1000">
				<el-row class="index-row" :gutter="16">
					<el-col :xs="24" :lg="12">
						<div class="bs-panel">
							<div class="index-banner">
								<swiper class="swiper swiper-banner" :options="swiperBanner" ref="swiperBanner">
									<swiper-slide v-for="(item,index) in 3" :key="index">
										<div class="banner-photo" :style="{'background-image': 'url('+banner+')'}">
										</div>
									</swiper-slide>
									<div class="swiper-pagination" slot="pagination"></div>
								</swiper>
							</div>
							<div class="index-swiper-grid">
								<div class="sw-row-bar flex-center">
									<div class="sw-label">公告</div>
									<div class="flex_bd">
										<swiper class="swiper swiper-scroll" :options="swiperOption" ref="swipernotice">
											<swiper-slide>北京时间 00:00-24:00，全年365天无休！</swiper-slide>
										</swiper>
									</div>
								</div>
								<div class="sw-row-bar flex-center">
									<div class="sw-label">榜单</div>
									<div class="flex_bd">
										<swiper class="swiper swiper-scroll" :options="swiperOption" ref="swiperrank">
											<swiper-slide>
												<div class="rank-sw-bar ellipsis">
													上周排行第一 <img src="../../assets/images/rank-1.png"> pp******69，
													获利率 <span class="text-green">63%</span>，
													总盈利 <span class="text-green">821.352.326.00</span>，
													赛事推荐分析师：张三（金牌分析师）
													<span class="sw-link">| 关注详情</span>
												</div>
											</swiper-slide>
										</swiper>
									</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :xs="24" :lg="12">
						<div class="bs-panel">
							<div class="bs-panel-body">
								<div class="bs-panel-hd flex-center flex-zBetween">
									<div class="tt">分析师</div>
									<router-link class="more" to="/analyst">MORE <span
											class="iconfont icon-right"></span>
									</router-link>
								</div>
								<div class="analyst-index">
									<el-row :gutter="20">
										<el-col :span="12">
											<div class="analyst-lg">
												<div class="analyst-cell flex-center">
													<div class="analyst-left">
														<div class="avatar">
															<img :src="Avatar" >
														</div>
														<div class="ana-bar">胜率 Top One</div>
														<div class="ana-rank-icon"><img
																src="../../assets/images/rank-icon.png"></div>
													</div>
													<div class="flex_bd">
														<div class="item-row">分析赛果准确率：<span
																class="text-green">80%</span></div>
														<div class="item-row">
															<div class="item-label text-yellow">金牌分析师 {{Aname}}</div>
															<el-button round size="small" type="success">包赔跟投
															</el-button>
														</div>
													</div>
												</div>
												<div class="anal-info">
													<div class="anal-cell">
														<div class="a-label">足彩分析师</div>
														<div class="a-val ellipsis">新东方集团培训师：越南新东方足彩管理部总监</div>
													</div>
													<div class="anal-cell">
														<div class="a-label">教育背景</div>
														<div class="a-val line-2">自2019年6月起任富国瑞泽回报混合型证券投资基金经理月起任富国瑞泽回报混合型证券投资基金经理月起任富国瑞泽回报混合型证券投资基金经理月起任富国瑞泽回报混合型证券投资基金经理。具有基金从业资格。</div>
													</div>
												</div>
											</div>
										</el-col>
										<el-col :span="12">
											<swiper class="swiper swiper-analyst" :options="swiperAnalyst"
												ref="swipernotice">
												<swiper-slide v-for="(item,index) in pplist" :key="index">
													<div class="sw-analyst" @click="swicthAnalyster(item.pic,item.name)">
														<div class="photo"><img :src="item.pic">
														</div>
														<div class="sw-name ellipsis">{{item.name}}</div>
														<div class="sw-persent">准确率：70%</div>
													</div>
												</swiper-slide>
												<div class="analyst-pagination" slot="pagination"></div>
											</swiper>
										</el-col>
									</el-row>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :xs="24" :lg="12">
						<div class="bs-panel">
							<div class="bs-panel-body">
								<div class="bs-panel-hd flex-center flex-zBetween">
									<div class="tt">热门赛事</div>
									<router-link class="more" to="/game">MORE <span class="iconfont icon-right"></span>
									</router-link>
								</div>
								<el-row class="index-matchs" :gutter="20">
									<el-col :span="12" v-for="(item,index) in 6" :key="index">
										<div class="match-card" @click="setVisible = true">
											<div class="match-head flex-center">
												<div class="mat-n">{{index+1}}</div>
												<div class="flex_bd">
													<div class="title">波胆 3：2</div>
													<div class="val text-green">@1.59%</div>
												</div>
												<div class="mat-time">2021 04-21 04:00</div>
											</div>
											<div class="match-body">
												<div class="match-pk-card">
													<div class="mat-pk flex-center flex-hc">
														<div class="text">神户胜利船shenghushenglichuan</div>
														<div class="pk"><img src="../../assets/images/pk.png"></div>
														<div class="text">德岛漩涡dedaoxuanwo</div>
													</div>
													<div class="mat-progress flex-center">
														<div class="flex_bd">
															<el-progress :stroke-width="12" :percentage="33">
															</el-progress>
														</div>
														<div class="val">90M</div>
														<div class="txt">成交量</div>
													</div>
												</div>
												<div class="match-bar flex-center flex-zEnd">
													<div class="text">距离关盘guliguanpan</div>
													<van-count-down :time="Counttime">
														<template #default="timeData">
															<span class="time-block">{{ timeData.hours }}</span>
															<span class="colon">:</span>
															<span class="time-block">{{ timeData.minutes }}</span>
															<span class="colon">:</span>
															<span class="time-block">{{ timeData.seconds }}</span>
														</template>
													</van-count-down>
												</div>
											</div>
										</div>
									</el-col>
								</el-row>
							</div>
						</div>
					</el-col>
					<el-col :xs="24" :lg="12">
						<div class="bs-panel">
							<div class="bs-panel-body">
								<div class="bs-panel-hd flex-center flex-zBetween">
									<div class="tt">赛事新闻</div>
									<router-link class="more" to="/news">MORE <span class="iconfont icon-right"></span>
									</router-link>
								</div>
								<el-row class="index-news" :gutter="20">
									<el-col :xs="24" :md="8" :lg="12" v-for="item in list" :key="item">
										<div class="news-box" @click="golink()">
											<div class="news-pic" :style="{'background-image': 'url('+item.pic+')'}">
											</div>
											<div class="news-grid">
												<div class="new-sm-title">FIFA 沙滩足球世界杯俄罗斯 2021™</div>
												<div class="new-title">随着差距缩小，RFU 占主导地位</div>
												<div class="new-time">2021-08-30</div>
											</div>
										</div>
									</el-col>
								</el-row>
							</div>
						</div>
					</el-col>
				</el-row>
				<div class="bs-panel">
					<div class="footer">
						<div class="foot-text">官方办法的合法执照与合作商</div>
						<div class="foot-logos">
							<img src="../../assets/images/endlogo.png">
							<img src="../../assets/images/endlogo.png">
							<img src="../../assets/images/endlogo.png">
							<img src="../../assets/images/endlogo.png">
							<img src="../../assets/images/endlogo.png">
							<img src="../../assets/images/endlogo.png">
							<img src="../../assets/images/endlogo.png">
							<img src="../../assets/images/endlogo.png">
							<img src="../../assets/images/endlogo.png">
							<img src="../../assets/images/endlogo.png">
						</div>
						<div class="copyright">copyrights © 2021 Football. all rights reserved.</div>
					</div>
				</div>
			</div>
			<!-- 手机 -->
			<div class="m-show" v-else>
				<swiper class="swiper swiper-banner" :options="swiperBanner" ref="swiperBanner">
					<swiper-slide v-for="(item,index) in 3" :key="index">
						<div class="banner-photo" :style="{'background-image': 'url('+mbanner+')'}">
						</div>
					</swiper-slide>
					<div class="swiper-pagination" slot="pagination"></div>
				</swiper>
				<!-- tab -->
				<van-sticky>
					<div class="index-m-tab">
						<el-tabs class="bs-tab-flex" v-model="activeName">
							<el-tab-pane label="热门赛事remensaishi" name="tabOne"></el-tab-pane>
							<el-tab-pane label="分析师fenxishi" name="tabTwo"></el-tab-pane>
						</el-tabs>
					</div>
				</van-sticky>
				<!-- 比赛 -->
				<div class="m-wrapper" v-if="activeName == 'tabOne'">
					<van-list
						v-model="loading"
						:finished="finished"
						finished-text="没有更多了"
						@load="onLoad"
						>
						<div class="match-card" @click="goUrl('/gameMDetail')" v-for="(item,index) in matchlist" :key="item">
							<div class="match-head flex-center">
								<div class="mat-n">{{index+1}}</div>
								<div class="flex_bd">
									<div class="title">波胆 3：2</div>
									<div class="val text-green">@1.59%</div>
								</div>
								<div class="mat-time">2021 04-21 04:00</div>
							</div>
							<div class="match-body">
								<div class="match-pk-card">
									<div class="mat-pk flex-center flex-hc">
										<div class="text">神户胜利船shenghushenglichuan</div>
										<div class="pk"><img src="../../assets/images/pk.png"></div>
										<div class="text">德岛漩涡dedaoxuanwo</div>
									</div>
									<div class="mat-progress flex-center">
										<div class="flex_bd">
											<el-progress :stroke-width="12" :percentage="33">
											</el-progress>
										</div>
										<div class="val">90M</div>
										<div class="txt">成交量</div>
									</div>
								</div>
								<div class="match-bar flex-center flex-zEnd">
									<div class="text">距离关盘guliguanpan</div>
									<van-count-down :time="Counttime">
										<template #default="timeData">
											<span class="time-block">{{ timeData.hours }}</span>
											<span class="colon">:</span>
											<span class="time-block">{{ timeData.minutes }}</span>
											<span class="colon">:</span>
											<span class="time-block">{{ timeData.seconds }}</span>
										</template>
									</van-count-down>
								</div>
							</div>
						</div>
					</van-list>
				</div>
				<!-- 分析师 -->
				<div class="m-wrapper" v-if="activeName == 'tabTwo'">
					<van-list
						v-model="loading2"
						:finished="finished2"
						finished-text="没有更多了"
						@load="onLoad2"
						>
						<div class="analyst-lg" @click="goUrl('/analystDetail')">
							<div class="analyst-cell flex-center">
								<div class="analyst-left">
									<div class="avatar">
										<img src="../../assets/images/fenxishi.png">
									</div>
									<div class="ana-bar">胜率 Top One</div>
									<div class="ana-rank-icon"><img src="../../assets/images/rank-icon.png"></div>
								</div>
								<div class="flex_bd">
									<div class="item-row">分析赛果准确率:<span class="text-green">80%</span></div>
									<div class="item-row">
										<div class="item-label text-yellow">金牌分析师 Craig</div>
										<el-button round size="small" type="warning">包赔跟投
										</el-button>
									</div>
								</div>
							</div>
							<div class="anal-info">
								<div class="anal-cell">
									<div class="a-label">足彩分析师</div>
									<div class="a-val">新东方集团培训师：越南新东方足彩管理部总监</div>
								</div>
								<div class="anal-cell">
									<div class="a-label">教育背景</div>
									<div class="a-val">自2019年6月起任富国瑞泽回报混合型证券投资基金经理。具有基金从业资格。</div>
								</div>
							</div>
						</div>
						<div class="analyst-lists">
							<div class="analyst-cell flex-center" v-for="(item,index) in alalist" :key="index" @click="goUrl('/analystDetail')">
								<div class="analyst-left">
									<div class="avatar">
										<img :src="item.pic">
									</div>
								</div>
								<div class="flex_bd">
									<div class="item-row">分析赛果准确率：<span class="text-green">80%</span></div>
									<div class="item-row">
										<div class="item-label text-yellow">分析师 {{item.name}}</div>
									</div>
								</div>
							</div>
						</div>
					</van-list>
				</div>
			</div>
		</div>
		<!--pc 弹出 您正在 -->
		<el-dialog custom-class="bs-dialog bs-index-dialog" title="您正在" :visible.sync="setVisible" width="620px">
			<div class="game-vs">
				<div class="vs-title">澳大利亚职业足球联赛</div>
				<div class="vs-flex flex-center flex-hc">
					<div class="vs-title">神户胜利船shenghushenglichuan</div>
					<div class="vs-card_bd">
						<div class="vs-value">反波胆 <span class="score">0-1</span></div>
						<div class="vs-time">2021 04-21 04:00</div>
					</div>
					<div class="vs-title">德岛漩涡dedaoxuanwo</div>
				</div>
			</div>
			<div class="popup-form">
				<div class="popup-cell">
					<div class="analy-select-btns flex-center flex-hc">
						<el-radio-group v-model="radioSelVal" @change="tabchange()">
							<el-radio v-for="(item,index) in selectTabs" :label="item.value" :key="index" border>{{item.text}}</el-radio>
						</el-radio-group>
					</div>
					<div class="btn-more" @click="goUrl('/game')">更多波坦</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">交易金额</div>
					<div class="popup-cell_bd">
						<el-input @input="input" v-model="jprice" placeholder="请输入交易金额"></el-input>
					</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">获利</div>
					<div class="popup-cell_bd">5.03%</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">预估获利</div>
					<div class="popup-cell_bd flex-center flex-zBetween">
						<div class="k-value text-green">{{resultPrice}}</div>
						<div class="y-info">手续费0.5%</div>
					</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">可选金额</div>
					<div class="popup-cell_bd flex-center">
						<div class="flex_bd">
							<div class="analy-select-btns flex-center">
								<el-radio-group v-model="radioPrice" @change="pricechange()">
									<el-radio v-for="(item,index) in selectPrice" :label="item" :key="index" border>{{item.text}}</el-radio>
								</el-radio-group>
							</div>
						</div>
						<div class="set-icon" @click="valVisible = true"><span class="iconfont icon-shezhi"></span>
						</div>
					</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">可用余额</div>
					<div class="popup-cell_bd">
						<div class="k-value text-green">10,012,912.00</div>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer flex">
				<div class="col">
					<el-button type="info" @click="setVisible = false">取 消</el-button>
				</div>
				<div class="col">
					<el-button type="success" @click="resVisible = true">确 定</el-button>
				</div>
			</div>
		</el-dialog>
		<el-dialog custom-class="bs-dialog bs-index-dialog" title="您正在" :visible.sync="valVisible" width="620px">
			<div class="game-vs">
				<div class="vs-title">澳大利亚职业足球联赛</div>
				<div class="vs-flex flex-center flex-hc">
					<div class="vs-title">神户胜利船shenghushenglichuan</div>
					<div class="vs-card_bd">
						<div class="vs-value">反波胆 <span class="score">0-1</span></div>
						<div class="vs-time">2021 04-21 04:00</div>
					</div>
					<div class="vs-title">德岛漩涡dedaoxuanwo</div>
				</div>
			</div>
			<div class="bs-val-form">
				<el-form ref="form" :model="form" label-position="top">
					<el-form-item label="第一 设定值diyishedingzhi：">
						<el-input v-model="form.value1" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="第二 设定值diershedingzhi：">
						<el-input v-model="form.value2" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="第二 设定值diershedingzhi：">
						<el-input v-model="form.value3" placeholder="请输入"></el-input>
					</el-form-item>
				</el-form>
			</div>
			
			<div slot="footer" class="dialog-footer flex">
				<div class="col">
					<el-button type="info" @click="valVisible = false">取 消</el-button>
				</div>
				<div class="col">
					<el-button type="success" @click="valComfirm">确 定</el-button>
				</div>
			</div>
		</el-dialog>
		<el-dialog custom-class="bs-dialog bs-index-dialog" title="交易成功" :visible.sync="resVisible" width="620px">
			<div class="game-vs">
				<div class="vs-title">澳大利亚职业足球联赛</div>
				<div class="vs-flex flex-center flex-hc">
					<div class="vs-title">神户胜利船shenghushenglichuan</div>
					<div class="vs-card_bd">
						<div class="vs-value">反波胆 <span class="score">0-1</span></div>
						<div class="vs-time">2021 04-21 04:00</div>
					</div>
					<div class="vs-title">德岛漩涡dedaoxuanwo</div>
				</div>
			</div>
			<div class="popup-form">
				<div class="popup-cell">
					<div class="p-label">队伍名称</div>
					<div class="popup-cell_bd">guangzhou city chongqingliangjiang athletlc</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">交易金额</div>
					<div class="popup-cell_bd">200,000.00</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">预估获利</div>
					<div class="popup-cell_bd">78,000.00</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">注单号码</div>
					<div class="popup-cell_bd">2104160575471717</div>
				</div> 
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="goUrl('/settlement')">前往交易明细qianwangjiaoyimingxi</el-button>
			</div>
		</el-dialog>
		<!-- 手机foter -->
		<Foot :active="0" />
	</div>
</template>

<script>
	// @ is an alias to /src
	import { Toast } from 'vant';
	import Head from '@/components/Head.vue'
	import Foot from "@/components/Foot.vue";
	export default {
		name: 'Home',
		components: {
			Head,Foot
		},
		data() {
			return {
				// swiper
				swiperBanner: {
					loop: true,
					autoplay: {
						delay: 2500,
						disableOnInteraction: false,
					},
					pagination: {
						el: '.swiper-pagination'
					},
				},
				swiperOption: {
					loop: true,
					direction: 'vertical',
					autoplay: {
						delay: 2500,
						disableOnInteraction: false,
					},
				},
				swiperAnalyst: {
					slidesPerView: 4,
					slidesPerColumn: 2,
					spaceBetween: 30,
					pagination: {
						el: '.analyst-pagination'
					},
				},
				Counttime: 30 * 60 * 60 * 1000,
				banner: require('../../assets/images/banner.jpg'),
				list: [{
						title: '随着差距缩小，RFU 占主导地位',
						pic: require('../../assets/images/news1.png'),
					},
					{
						title: '免费赠送金币，你来就送噢！',
						pic: require('../../assets/images/news2.png'),
					},
					{
						title: '随着差距缩小，RFU 占主导地位',
						pic: require('../../assets/images/news1.png'),
					},
					{
						title: '免费赠送金币，你来就送噢！',
						pic: require('../../assets/images/news2.png'),
					},
				],
				pplist: [{
					name: 'Addie Gardner',
					pic: require('../../assets/images/people1.png'),
				}, {
					name: 'Noah Cooper',
					pic: require('../../assets/images/people2.png'),
				}, {
					name: 'Minnie Carter',
					pic: require('../../assets/images/people3.png'),
				}, {
					name: 'Eva Kim',
					pic: require('../../assets/images/people1.png'),
				}, {
					name: 'Addie Gardner',
					pic: require('../../assets/images/people1.png'),
				}, {
					name: 'Noah Cooper',
					pic: require('../../assets/images/people2.png'),
				}, {
					name: 'Minnie Carter',
					pic: require('../../assets/images/people3.png'),
				}, {
					name: 'Eva Kim',
					pic: require('../../assets/images/people1.png'),
				}, {
					name: 'Addie Gardner',
					pic: require('../../assets/images/people1.png'),
				}, {
					name: 'Noah Cooper',
					pic: require('../../assets/images/people2.png'),
				}, {
					name: 'Minnie Carter',
					pic: require('../../assets/images/people3.png'),
				}, {
					name: 'Eva Kim',
					pic: require('../../assets/images/people1.png'),
				}, ],
				// 弹出
				valVisible: false,
				setVisible: false,
				resVisible: false,
				form: {
					value1: '',
					value2: '',
					value3: '',
				},
				jprice:'',
				radioPrice:'',
				selectPrice: [{
						"value": 200000,
						"text": "+200000"
					},
					{
						"value": 1000000,
						"text": "+1000000",
					},
					{
						"value": 5000000,
						"text": "+5000000"
					},
					{
						"value": 6200000,
						"text": "全部"
					}
				],
				radioSelVal:1,
				selectTabs: [{
						"value": 1,
						"text": "正波"
					},
					{
						"value": 2,
						"text": "反波",
					},
				],
				resultPrice:0,
				windowWidth: document.documentElement.clientWidth,
				// 移动端
				mbanner: require('../../assets/images/mbanner.jpg'),
				activeName:'tabOne',
				matchlist:[],
				loading: false,
				finished: false,
				loading2: false,
				finished2: false,
				alalist: [{
						name: 'Addie Gardner',
						pic: require('../../assets/images/people1.png'),
					},{
						name: 'Noah Cooper',
						pic: require('../../assets/images/people2.png'),
					},{
						name: 'Minnie Carter',
						pic: require('../../assets/images/people3.png'),
					},{
						name: 'Eva Kim',
						pic: require('../../assets/images/people1.png'),
					},{
						name: 'Addie Gardner',
						pic: require('../../assets/images/people1.png'),
					}
				],
				Avatar:require('../../assets/images/fenxishi.png'),
				Aname:'Craig'
			};
		},
		mounted() {
			var that = this;
			window.onresize = () => {
				return (() => {
					window.fullWidth = document.documentElement.clientWidth;
					that.windowWidth = window.fullWidth; // 宽
				})()
			};
		},
		methods: {
			golink() {
				this.$router.push('/newsDetail');
			},
			tabchange(){
				console.log(this.radioSelVal)
			},
			pricechange(){
				console.log(this.radioPrice)
				this.jprice = this.radioPrice.value
				this.resultPrice = parseFloat(this.radioPrice.value*.05).toFixed(2)
			},
			input(e){
				console.log()
				this.resultPrice = parseFloat(e*.05).toFixed(2)
			},
			
			goUrl(url){
				this.$router.push(url);
			},
			// 移动端
			onLoad() {
			// setTimeout 仅做示例，真实场景中一般为 ajax 请求
				setTimeout(() => {
					for (let i = 0; i < 10; i++) {
						this.matchlist.push(this.matchlist.length + 1);
					}

					// 加载状态结束
					this.loading = false;

					// 数据全部加载完成
					if (this.matchlist.length >= 20) {
						this.finished = true;
					}
				}, 1000);
			},
			onLoad2() {
			// setTimeout 仅做示例，真实场景中一般为 ajax 请求
				setTimeout(() => {
					for (let i = 0; i < 10; i++) {
						this.alalist.push({
							name: 'Addie Gardner',
							pic: require('../../assets/images/people1.png'),
						});
					}

					// 加载状态结束
					this.loading2 = false;

					// 数据全部加载完成
					if (this.alalist.length >= 20) {
						this.finished2 = true;
					}
				}, 1000);
			},
			swicthAnalyster(e,b){
				this.Avatar = e
				this.Aname = b
			},
			// 三个值设定
			valComfirm(){
				if(this.form.value1 == ''){
					Toast('请输入第一 设定值diyishedingzhi')
					return false
				}
				if(this.form.value2 == ''){
					Toast('请输入第二 设定值diyishedingzhi')
					return false
				}
				if(this.form.value3 == ''){
					Toast('请输入第三 设定值diyishedingzhi')
					return false
				}
				this.selectPrice[0].value = this.form.value1
				this.selectPrice[0].text = this.form.value1
				this.selectPrice[1].value = this.form.value2
				this.selectPrice[1].text = this.form.value2
				this.selectPrice[2].value = this.form.value3
				this.selectPrice[2].text = this.form.value3
				this.valVisible = false
				
			}
		}
	}
</script>
